import { Card, Image, Divider, Toast } from 'antd-mobile'
import { getArticlesInfo } from '@/api/home'
import "./list.scss"
import { useNavigate } from "react-router-dom"
function Clist(data: []) {
    const navigate = useNavigate()
    const cl = async (item: string) => {

        let result = await getArticlesInfo(item);
        if (result && result.status == 200) {

            navigate('/content', {
                state: {
                    content: result.data.data,
                    from: location.pathname,
                    // index:
                }
            })
        } else {
            Toast.show({
                icon: 'fail',
                content: '获取文章失败！',
            })
        }
    }
    return (
        <>

            {data.data.map(item => (<div key={item.id}><Card bodyClassName='ca' onClick={() => cl(item.id)}>
                {
                    item.cover.images.length === 0 ?
                        <div className='font1'>
                            <p className='title1'>{item.title}</p>
                            <p className='text1'>{item.pubdate}</p>
                        </div>
                        :
                        <>
                            <Image
                                className='img'
                                src={item.cover.images?.[0]}

                                fit="cover"
                                width={40}
                                height={40}
                            />
                            <div className='font'>
                                <p className='title'>{item.title}</p>
                                <p className='text'>{item.pubdate}</p>
                            </div>
                        </>
                }

            </Card>
                <Divider />
            </div>))}
        </>
    )
}
export default Clist